<template>
  <div class="products">
    <BsSubmenu :subMenus="subMenus" />
    
    <!-- banner -->
    <section class="banner">
      <div class="hd text-center">
        <div class="f20 title">周边设备</div>
        <div class="mt20 c3">
          
        </div>
      </div>
    </section>

     <section class="section-3">
      <div class="section-title f24 text-center">周边设备</div>
      <div class="section-subtitle text-center mt10 mb40 c3 letter-space">INTILLIGENT TERMENAL</div>
      <div class="hd">
        <!-- <ul class="sence-list clearfix">
          <li>
            <p class>摄像机</p>
            <img src="../assets/images/products/wx0003.png" alt class="mt20">
          </li>
          <li>
            <p class>全向麦</p>
            <img class="mt20" src="../assets/images/products/wx0000.png" alt>
          </li>
        </ul> -->
      </div>
    </section>

    <!-- <BsBuy /> -->
    
  </div>
</template>

<script>
import BsSubmenu from '@/components/BsSubmenu'
import BsBuy from '@/components/BsBuy'

export default {
  components: {BsSubmenu, BsBuy},
  data (){
    return {
      subMenus: [
       {title: '自主软件', link:'/products', active: false},
        {title: '智能终端', link:'/products/page4', active: false},
        {title: '摄像机', link:'/products/list', active: false},
        {title: '周边设备', link:'/products/page5', active: true},
      ]
    }
  }
}
</script>

<style lang="less" scoped>
.banner {
  color: #fff;
  background: url(../assets/images/products/armchairs-blur-chair-296883.png)
    no-repeat center center;
  height: 210px;
  .hd {
    padding-top: 60px;
    .f20 {
      color: #137ee8;
      font-weight: 800;
    }
    .c3 {
      line-height: 1.5;
    }
  }
}

.section-1{
  padding: 80px 0;
  .tec-list{
    margin-top: 20px;
    text-align: center;
    li{
      display: inline-block;
      padding: 20px;
      .desc{
        display: block;
        line-height: 1.6;
        margin-top: 10px;
      }
    }
  }
}

.section-3 {
  padding: 60px 0;
  background: #ffffff;
  .sence-list {
    width: 800px;
    margin: auto;
    background: #f9fafb;
    li {
      float: left;
      width: 48%;
      margin-right: 2%;
      margin-top: 2%;
      text-align: center;
      padding: 20px;
      text-align: center;
      img {
        width: 100%;
      }
    }
  }
}

</style>
